﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
     test it!
</asp:Content>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="../../Scripts/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.wysiwyg.js"></script>
    <script type="text/javascript" src="../../Scripts/wysiwyg.image.js"></script>
    <script type="text/javascript" src="../../Scripts/wysiwyg.link.js"></script>
    <script type="text/javascript" src="../../Scripts/wysiwyg.table.js"></script>
    <script >
        $(function () {
            //  $('#0').wysiwyg();
            // $('#1').wysiwyg();
            //初始化一开始就有的文本框及其头部按钮
            $('textarea').each(function () {
                $(this).wysiwyg();
            });

            //add before
            $('a.addBefore').live("click", function () {
                var newRowID;
                var currentRow = $(this).parent().parent();
                var currentRowID = currentRow.find('textarea').attr('id');
                var currentRowIndex = currentRow.index();
                if (currentRowIndex == 0) {
                    newRowID = parseFloat(currentRowID) - 1;
                } else {
                    var RowSet = $('textarea');
                    var beforeRow = RowSet.get(currentRowIndex - 1);
                    var beforeRowID = beforeRow.id;
                    newRowID = (parseFloat(beforeRowID) + parseFloat(currentRowID)) / 2;
                }
                var newRow = "<tr><td><textarea id='" + newRowID + "' rows='1' cols='120'></textarea></td><td><a class='addBefore'>add before</a><br /><a class='addAfter'>add after</a><br /><a class='save'>save</a><br /><a class='delete'>delete</a><br /><a class='comment'>comment</a><br /></td></tr>";
                $(newRow).insertBefore(currentRow);
                //$('#'+newRowID).wysiwyg();
                $('textarea').each(function () {
                    $(this).wysiwyg();
                });
            });


            //add after
            $('a.addAfter').live("click", function () {
                var newRowID;
                var currentRow = $(this).parent().parent();
                var currentRowID = currentRow.find('textarea').attr('id');
                var currentRowIndex = currentRow.index();
                var size = $('tr').length;
                if (currentRowIndex == size - 1) {
                    newRowID = parseFloat(currentRowID) + 1;
                } else {
                    var RowSet = $('textarea');
                    var afterRow = RowSet.get(currentRowIndex + 1);
                    var afterRowID = afterRow.id;
                    newRowID = (parseFloat(afterRowID) + parseFloat(currentRowID)) / 2;
                }
                var newRow = "<tr><td><textarea id='" + newRowID + "' rows='1' cols='120'></textarea></td><td><a class='addBefore'>add before</a><br /><a class='addAfter'>add after</a><br /><a class='save'>save</a><br /><a class='delete'>delete</a><br /><a class='comment'>comment</a><br /></td></tr>";
                $(newRow).insertAfter(currentRow);
                //$('#'+newRowID).wysiwyg();
                $('textarea').each(function () {
                    $(this).wysiwyg();
                });
            });


            //delete
            $('a.delete').live("click", function () {
                var currentRow = $(this).parent().parent();
                currentRow.remove();
            });
        });
    </script>
    <h2>Requirement Specification</h2>
    <div id="container"> 
       <table>
            <tbody id="t_body">
                <tr id="tr0">
                    <td><textarea id="0" rows="1" cols="120"></textarea></td>
            
                    <td>
                        <a class='addBefore'>add before</a><br />
                        <a class='addAfter'>add after</a><br />
                        <a class='save'>save</a><br />
                        <a class='delete'>delete</a><br />
                        <a class='comment'>comment</a><br />
                    </td>
                </tr>
                <tr id="tr1">
                    <td><textarea id="1" rows="1" cols="120"></textarea></td>
                  
                    <td>
                       <a class='addBefore'>add before</a><br />
                        <a class='addAfter'>add after</a><br />
                        <a class='save'>save</a><br />
                        <a class='delete'>delete</a><br />
                        <a class='comment'>comment</a><br />
                    </td>
                </tr>
            </tbody>
       </table>
     </div>
     <hr />
</asp:Content>
